﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Stacked Bar Chart</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />
    
    <script src="../../scripts/boot.js" type="text/javascript"></script> 
    
</head>
<body>
    <h1>Stacked Bar Chart</h1>
    <input type="button" value="OpenChart" onclick="showChartWindow();"/>
    <div id="win1" class="mini-window" title="Stacked Bar Chart" style="width:480px;height:350px;" 
        showModal="true" allowResize="true" 
        >
        <div id="chartContainer" style="width:100%;height:100%;"></div>
    </div>
</body>
</html>
<script src="YUI2/yahoo-dom-event.js" type="text/javascript"></script>
<script src="YUI2/element-min.js" type="text/javascript"></script>
<script src="YUI2/charts-min.js" type="text/javascript"></script>
<script src="YUI2/datasource-min.js" type="text/javascript"></script>
<script src="YUI2/json.js" type="text/javascript"></script>
<script src="YUI2/swf/swf-min.js" type="text/javascript"></script>
<script type="text/javascript">
    mini.parse();

    var chartContainerId = "chartContainer";
    function showChartWindow() {
        var win = mini.get("win1");
        win.show();
        buildChart();
    }
    showChartWindow();

function buildChart(){
    YAHOO.widget.Chart.SWFURL = "YUI2/swf/charts.swf";
    YAHOO.namespace("demo");
    YAHOO.demo.annualSales =
	[
		{ year: 2004, internetsales: 246852, printsales: 2523359, tvsales: 3123493 },
		{ year: 2005, internetsales: 851876, printsales: 1084952, tvsales: 3166920 },
		{ year: 2006, internetsales: 3917246, printsales: 587151, tvsales: 2330095 },
		{ year: 2007, internetsales: 5318185, printsales: 307456, tvsales: 1830729 }
	];

	var salesData = new YAHOO.util.DataSource( YAHOO.demo.annualSales );
	salesData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
	salesData.responseSchema = { fields: [ "year", "internetsales", "printsales", "tvsales" ] };

//--- chart

	var seriesDef =
	[
		{
			xField: "internetsales",
			displayName: "Internet Sales"
		},
		{
			xField: "printsales",
			displayName: "Print Sales"
		},
		{
			xField: "tvsales",
			displayName: "Television Sales"
		}
	];

	//used to format x axis
	YAHOO.demo.numberToCurrency = function( value )
	{
		return YAHOO.util.Number.format(Number(value), {prefix: "$", thousandsSeparator: ","});
	}

	//Numeric Axis for our currency
	var currencyAxis = new YAHOO.widget.NumericAxis();
	currencyAxis.stackingEnabled = true;
	currencyAxis.labelFunction = YAHOO.demo.numberToCurrency;

	var mychart = new YAHOO.widget.StackedBarChart( chartContainerId, salesData,
	{
		series: seriesDef,
		yField: "year",
		xAxis: currencyAxis
	});
}
    
</script>